<template>

    <div class="common-layout">
        <h3>商家管理</h3>
        <el-container>
            <el-header>
                <!-- <el-row :gutter="24"> -->
                <el-col :span="23">
                    <el-card shadow="never" class="box-card"
                        @click="this.$router.push({ name: 'update_shops', params: { 'user_id': shops_list.user } })">
                        <el-col :span="22">
                            <div class="shops_header">
                                <el-avatar shape="square" :size="80" :src="shops_list.logo" />
                                <span style="text-align:left">
                                    <span>店铺名称：{{ shops_list.shops_name }}</span><br>
                                    <span>联系方式：{{ shops_list.shops_mobile }}</span><br>
                                    <span>店家标语：{{ shops_list.shops_slogan }}</span><br>
                                    <span>店铺地址：{{ shops_list.shops_address }}</span>
                                </span>
                            </div>
                        </el-col>

                    </el-card>
                </el-col>
                <!-- </el-row> -->
            </el-header><br><br><br><br><br><br>

            <div>
                <button
                    @click="this.$router.push({ name: 'shops_order', query: { 'shops_id': shops_list.id } })">查看完成的订单</button>
            </div>

            <el-container>

                <!-- 左侧部 -->
                <el-aside width="100px" style="background: #11ff11">
                    <el-link type="success" @click="is_add_kind = true">添加分类</el-link><br><br>
                    <el-link type="success" @click="is_add_dishes = true">添加菜品</el-link>


                    <el-scrollbar height="300px">
                        <h3>菜品分类</h3>
                        <p v-for="i, itme in kind_list" :key="itme" class="scrollbar-demo-item">
                            <span @click="query_one_kind(i.id)">{{ i.kind_name }}</span>
                        </p>
                    </el-scrollbar>
                </el-aside>

                <!-- 主要区域容器 -->
                <el-main>
                    <!-- <span v-for="a,b in kind_list" :key="b"> -->
                    <el-scrollbar height="350px">
                        <div v-for="i, j in dishes_all" :key="j">
                            <el-card class="main-box-card">
                                <template #header>
                                    <div class="dishes-card-header">
                                        <span>菜名：{{ i.dishes_name }}</span>
                                        <div class="button1">
                                            <el-button class="button" text @click="del_dishes(i.id)">删除</el-button>
                                            <el-button class="button" text @click="dishes_redact(i)">编辑</el-button>
                                        </div>
                                    </div>
                                </template>

                                <span class="dishes_card-body">
                                    <!-- <el-avatar shape="square" :size="80" :src="i.dishes_picture" /> -->
                                    <img :src="i.dishes_picture" alt="" class="dishes_img" :size="40"><br>
                                    种 类：{{ i.kind_name }}
                                    <!-- <span v-if="i.kind">{{this.kind_list.kind_name}}</span> -->
                                    <!-- <span v-else-if="i.kind == 2">{{}}</span>                         -->
                                    <br>
                                    价格￥：{{ i.dishes_price }}
                                </span>

                            </el-card>
                        </div>
                    </el-scrollbar>
                </el-main>

            </el-container>
        </el-container>

    </div>


    <!-- 修改菜品 -->
    <div>
        <el-dialog v-model="is_dishes" title="修改菜品" width='330px'>
            <el-form :model="dishes_redact_info">
                <el-form-item label="菜品名：">
                    <el-input v-model="dishes_redact_info.dishes_name" placeholder="请输入菜品名" clearable
                        autocomplete="off" />
                </el-form-item>

                <el-form-item label="价格：">
                    <el-input v-model="dishes_redact_info.dishes_price" type="text" placeholder="请输入价格" clearable
                        autocomplete="off" />
                </el-form-item>

                <el-form-item label="图片：">
                    <img :src="dishes_redact_info.dishes_picture" alt="" class="dishes_img" :size="40">
                </el-form-item>

            </el-form><br>

            <span>
                <el-button type="primary" @click="is_dishes = false">取消修改</el-button>
                <el-button type="primary" @click="update_dishes(this.dishes_redact_info.id)">确认修改</el-button>
            </span>
        </el-dialog>
    </div>


    <!-- 添加菜品 -->
    <div>
        <el-dialog v-model="is_add_dishes" title="添加菜品" width='330px'>
            <el-form :model="add_dishes_info">
                <el-form-item label="菜品名：">
                    <el-input v-model="add_dishes_info.dishes_name" placeholder="请输入菜品名" clearable autocomplete="off" />
                </el-form-item>

                <el-form-item label="价格：">
                    <el-input v-model="add_dishes_info.dishes_price" type="text" placeholder="请输入价格" clearable
                        autocomplete="off" />
                </el-form-item>

                <el-form-item label="图片：">
                    <a class="avatar" target="_blank">
                        <img :src="add_dishes_info.dishes_picture" style="width':100px; height:100px; border-radius:100%; " />
                    </a>
                    <div class='board_ele'><input type="file" @change="upload_qiniu"></div>

                </el-form-item>


                <el-form-item label="菜品种类：">
                    <select v-model="add_dishes_info.kind_id">
                        <option :label="i.kind_name" :value="i.id" v-for="i, j in kind_list" :key="j"></option>
                    </select>
                </el-form-item>
            </el-form><br>

            <span>
                <el-button type="primary" @click="is_add_dishes = false">取消添加</el-button>
                <el-button type="primary" @click="add_dishes()">确认添加</el-button>
            </span>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="is_add_kind" title="添加菜品分类" width='330px'>
            <el-form :model="add_kind_info">
                <el-form-item label="分类名：">
                    <el-input v-model="add_kind_info.kind_name" placeholder="请输入分类名" clearable autocomplete="off" />
                </el-form-item>
            </el-form>
            <span>
                <el-button type="primary" @click="is_add_kind = false">取消添加</el-button>
                <el-button type="primary" @click="add_kind()">确认添加</el-button>
            </span>
        </el-dialog>
    </div>


</template>

<script>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Axios from 'axios';
export default {
    data() {
        return {
            host: 'http://127.0.0.1:8000/',
            pk: '',  //商家id
            shops_list: [],  //商家信息
            kind_list: [],   //菜品种类
            dishes_all: [],   //所有菜品
            img: '',//商家头像
            is_dishes: false,    //菜品编辑
            dishes_redact_info: {
                'id': '',
                'dishes_name': '',
                'dishes_price': '',
                'dishes_picture': '',
                'kind_id': '',
            },

            is_add_dishes: false,  //添加菜品
            add_dishes_info: {       //添加菜品的数据
                'id': '',
                'dishes_name': '',
                'dishes_price': '',
                'dishes_picture': '',
                'kind_id': '',
            },
            is_add_kind: false,//添加分类
            add_kind_info: {       //添加菜品的数据
                'id': '',
                'kind_name': '',
            },
            uptoken: '',
            imgkey: '',
            src: '',

        }
    },
    mounted() {
        this.pk = localStorage.getItem('id')
        this.get_shops(),  //获取商家信息
            this.get_kind_all(),  //获取所有菜品种类
            // this.query_one_kind()  //获取商家一个种类的菜品
            this.get_dishes_all()  //获取所有菜品详情
        this.get_uptoken()


    },

    methods: {
        // 获取商家信息
        get_shops() {
            Axios.get(this.host + 'shops/query_shops/' + this.pk + '/',).then(resp => {
                console.log('获取登录商家信息', resp)
                if (resp.data.code == 200) {
                    this.shops_id = resp.data.shops_list.id
                    this.shops_list = resp.data.shops_list
                    console.log('接受赋值', this.shops_list)
                    // this.json_shops = JSON.stringify(this.shops_list)
                }
            }).catch(err => {
                console.log('获取登录商家信息失败', err)
            })
        },

        // 获取所有菜品种类
        get_kind_all() {
            Axios.get(this.host + 'shops/query_kind/').then(resp => {
                console.log('获取商家的所有菜品种类', resp)
                if (resp.data.code == 200) {
                    this.kind_list = resp.data.kind_all
                    console.log('接受赋值', this.kind_list)
                }
            }).catch(err => {
                console.log('获取商家所有种类信息失败', err)
            })
        },

        //获取一个种类的所有菜品
        query_one_kind(pk) {
            Axios.get(this.host + 'shops/get_dishes_all/' + pk + '/',
                { headers: { 'token': localStorage.getItem('token') || '' } }).then(resp => {
                    console.log('获取商家一个种类的菜品', resp)
                    if (resp.data.code == 200) {
                        this.dishes_all = resp.data.kind_dishes
                        console.log('接收赋值种类菜品', this.dishes_all)
                    }
                }).catch(err => {
                    console.log('获取商家一个种类菜品信息失败', err)
                })
        },


        //获取所有菜品详情
        get_dishes_all() {
            Axios.get(this.host + 'shops/get_kind_dishes_all/').then(resp => {
                console.log('获取商家所有菜品', resp)
                if (resp.data.code == 200) {
                    this.dishes_all = resp.data.dishes_all
                    console.log('接收赋值所有菜品', this.kind_dishes)
                }
            }).catch(err => {
                console.log('获取商家所有菜品信息失败', err)
            })
        },

        //菜品编辑
        dishes_redact(i) {
            this.is_dishes = true
            this.dishes_redact_info.id = i.id
            this.dishes_redact_info.dishes_name = i.dishes_name
            this.dishes_redact_info.dishes_price = i.dishes_price
            this.dishes_redact_info.dishes_picture = i.dishes_picture
            this.dishes_redact_info.kind_id = i.kind_id
        },


        // 修改菜品
        update_dishes(pk) {
            Axios.put(this.host + 'shops/get_dishes/' + pk + '/', this.dishes_redact_info,
                { headers: { 'token': localStorage.getItem('token') || '' } }
            ).then(resp => {
                console.log('商家修该菜品', resp)
                if (resp.data.code == 200) {
                    this.get_dishes_all()
                    this.is_dishes = false
                    alert(resp.data.msg)
                } else {
                    alert(resp.data.msg)
                }
            }).catch(err => {
                console.log('商家修改菜品信息失败', err)
            })
        },

        // 删除菜品
        del_dishes(pk) {
            ElMessageBox.confirm('确定要删除这到菜品吗?', '删除提示', {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消删除',
                type: 'warning',
            }
            ).then(() => {
                Axios.delete(this.host + 'shops/get_dishes/' + pk + '/',
                    { headers: { 'token': localStorage.getItem('token') || '' } }
                ).then(resp => {
                    console.log('商家删除菜品', resp)
                    if (resp.data.code == 200) {
                        this.get_dishes_all()
                        ElMessage({
                            type: 'success',
                            message: resp.data.msg,
                        })
                    } else {
                        ElMessage({
                            type: 'info',
                            message: resp.data.msg,
                        })
                    }
                }).catch(err => {
                    console.log('商家删除菜品信息失败', err)
                })
            })
        },

        // 添加菜品
        add_dishes() {
            Axios.post(this.host + 'shops/get_kind_dishes_all/', this.add_dishes_info,
                { headers: { 'token': localStorage.getItem('token') || '' } }
            ).then(resp => {
                console.log('商家添加菜品', resp)
                if (resp.data.code == 200) {
                    this.get_dishes_all()
                    this.add_dishes_info.dishes_name = '',
                        this.add_dishes_info.dishes_price = '',
                        this.add_dishes_info.dishes_picture = '',
                        this.add_dishes_info.kind_id = '',

                        this.is_add_dishes = false
                    alert(resp.data.msg)
                } else {
                    alert(resp.data.msg)
                }
            }).catch(err => {
                console.log('商家添加菜品信息失败', err)
            })
        },

        // 上传七牛
        upload_qiniu(e) {
            // 获取文件对象
            let file = e.target.files[0];
            // 声明变量
            let param = new FormData();
            // 将上传凭证添加参数
            param.append('token', this.uptoken);
            // 添加文件
            param.append('file', file);
            // 定制化axios
            const axios_qiniu = Axios.create({ withCredentials: false });
            // 发送请求
            axios_qiniu({
                method: 'POST',
                url: 'http://upload-z2.qiniup.com',
                data: param,
                timeout: 30000
            }).then(res => {
                console.log('上传七牛云', res)
                this.add_dishes_info.dishes_picture = 'http://rg16bgdu8.hn-bkt.clouddn.com/' + res.data.key
                this.dishes_redact_info.dishes_picture = 'http://rg16bgdu8.hn-bkt.clouddn.com/' + res.data.key
                this.imgkey = res.data.key
                console.log('aa', this.add_dishes_info.dishes_picture)
            })
        },
        // 修改数据库中的头像

        // 获取七牛云凭证
        get_uptoken() {
            Axios.get(this.host + 'shops/qiniu/').then(res => {
                console.log('七牛云的token', res.data.data)
                this.uptoken = res.data.data
            })
        },
        //添加分类
        add_kind() {
            Axios.post(this.host + 'shops/query_kind/', this.add_kind_info,
                { headers: { 'token': localStorage.getItem('token') || '' } }).then((resp) => {
                    console.log('添加分类', resp)
                    if (resp.status == 200) {
                        this.get_kind_all()
                        this.add_kind_info.kind_name = '',
                            this.is_add_kind = false
                        alert(resp.data.msg)
                    } else {
                        alert(resp.data.msg)
                    }
                }).catch((err) => {
                    console.log(err)
                });
        }


    },









}
</script>

<style>
/* 整个页面的 */
.common-layout {
    /* height: 800px; */
    width: 480px;
}

/* 商家卡片头部 */
.shops_header {
    width: 360px;
    height: 100px;
    display: flex;
    justify-content: space-between;
}

.img {
    width: 160;
    height: 160;
    border-radius: 50%;
    background: #424242;
    /* img:
        width 100%;
        border-radius: 50%; */
}

/* 卡片 */
.main-box-card {
    width: 330px;
}

/* 菜品卡片头部 */
.dishes-card-header {
    height: 10px;
    widows: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 删除修改按钮 */
.button1 {
    right: auto;
}


/* .text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
} */

/* 菜品卡片身体 */
.dishes-card-body {
    height: 100px;
}

/* 菜品图片 */
.dishes_img {
    /* vertical-align:top; */
    display: inline;
    float: left;
    height: 100px;
    width: 100px;
}

/* 添加菜品选择种类的下拉框 */
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}


/* 添加菜品图片 */
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>